<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 综合练习2</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h3>你最喜欢哪个明星？</h3>
        <input type="checkbox" v-model="all" @change="fullCheck()">全选<br>
        <span v-for="(item,index) in list"><input type="checkbox" v-model="item.check"
                @change="checkClick()">{{item.name}}</span><br>
        新增其他：<input type="text" v-model="newName"><br>
        <input type="file" @change="load($event)"><button @click="add()">上传</button><br>
        <span v-for="item in list"><img :src="item.src" style="width: 180px;height: 260px;"
                v-show="item.check==true"></span><br>
        <button @click="qxCheck">全不选</button>
        <button @click="qbxCheck">全选</button>
        <button @click="fxCheck">反选</button>


    </div>

</body>

</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                checkedValue: false,
                list: [{
                        name: '丁程鑫',
                        checked: false,
                        src: './dcx.jpg'
                    },
                    {
                        name: '李汶翰',
                        checked: false,
                        src: './lwh.jpg'
                    },
                    {
                        name: '余景天',
                        checked: false,
                        src: './yjt.jpg'
                    },
                    {
                        name: '何洛洛',
                        checked: false,
                        src: './hll.jpg'
                    },
                ],
                all: false,
                qx: false,
                qbx: true,
                fx: true,
                newName: '',
                fileSrc: '',

            }
        },
        methods: {
            fullCheck() {
                if (this.all) {
                    this.list.map(vv => {
                        vv.check = true
                    })

                } else {
                    this.list.map(vv => {
                        vv.check = false

                    })

                }
            },
            qxCheck() {
                if (this.qx) {
                    this.list.map(vv => {
                        vv.check = true
                    })

                } else {
                    this.list.map(vv => {
                        vv.check = false

                    })

                }
            },
            qbxCheck() {
                if (this.qbx) {
                    this.list.map(vv => {
                        vv.check = true
                    })

                } else {
                    this.list.map(vv => {
                        vv.check = false

                    })

                }
            },
            fxCheck() {
                if (this.fx) {
                    this.list.map(vv => {
                        vv.check = !vv.check
                    })

                } else {
                    this.list.map(vv => {
                        vv.check == vv.check

                    })

                }
            },






            // checkNone(){
            //     this.list.forEach(item =>{
            //         item.checked=false;
            //     });
            // },
            // checkAll(){
            //     this.list.forEach(item =>{
            //         item.checked=true;
            //     });
            // },
            // checkAnti(){
            //     this.list.forEach(item =>{
            //         item.checked=!item.checked;
            //     });
            // },


            checkClick() {
                let flag = this.list.length //获得数组的长度，并赋值给变量flag
                this.list.map(v => {
                    if (!v.check) flag-- //遍历数组，如果遇到check是false的，就flag减1
                })
                if (flag < this.list.length) //如果flag的值小于数组的长度，说明有对象没有被选中
                    this.all = false
                else
                    this.all = true
            },
            load(e) {
                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0])
                img.onload = ({
                    target
                }) => {
                    alert("上传成功")
                    this.fileSrc = target.result
                }
            },
            add() {
                this.list.push({
                    name: this.newName,
                    check: false,
                    src: this.fileSrc
                })

            }
        },

    }).mount("#app")
</script>